<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门</title>
  <script src="./vue.js"></script>
</head>
<body>

  <div id="root">
    <h1 @click="handleClick">hello {{ msg }} : {{ number }}</h1>
    <div v-html="content" ></div>
    <!--v-text: 不会转义-->
    <!--//v-html: 会转义-->
    <div :title="title" v-if="show">hello world</div>
    <input type="text" v-model="content_d">
    <div>{{content_d}}</div>

    姓：<input type="text" v-model="firstName">
    名：<input type="text" v-model="lastName">
    <div>{{fullName}}</div>
    <div>{{count}}</div>
    <button @click="handleClick">toggle</button>
  </div>
  <script>
      new Vue({
          el: "#root",
          data: {
              msg: 'world',
              number: 123,
              content: '<h1>content</h1>',
              title: 'this is hello world',
              content_d: 'this is content',
              firstName: '',
              lastName: '',
              count: 0,
              show: true
          },
          methods: {
          	handleClick: function () {
                this.number = 666
            }
          },
          computed: {
          	fullName: function () {
                return this.firstName + ' ' + this.lastName
            }
          },
          watch: {
          	fullName: function () {
                this.count++
            }
          }
      })
  </script>
</body>
</html>